<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../Style.css">
    <script src="../Script.js" defer></script>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .first-image {
            width: 32px;
            height: 32px;
        }

        .text {
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        .third-image-container {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .third-image {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="container">
        <div>
        
            <img src="../Icon.png" alt="First Image" class="first-image">
        </div>

        <div>
            <button class="platform-ios" style="display:inline-block" onclick="changeLanguage('en-us')">English</button>
            <button class="platform-ios" style="display:inline-block" onclick="changeLanguage('zh-cn')">中文</button>
        </div>

        <p class="zh-cn platform-ios text">按照下面的操作启用插件并允许所有网站的权限, 启用后在 Safari 中打开视频即可使用</p>

        <p class="en-us platform-ios text">Follow the actions below to enable the extension and allow permissions for
            all sites</p>


        <div class="third-image-container">

            <img class="en-us platform-ios third-image" src="../en-us.gif" />
            <img class="zh-cn platform-ios third-image" src="../zh-cn.gif" />
        </div>



        <p class="platform-mac">你可以在Safari->偏好设置->插件中启用 VideoTogether</p>
        <p class="platform-mac state-unknown">You can turn on VideoTogether’s extension in Safari Extensions
            preferences.</p>
        <p class="platform-mac state-on">VideoTogether’s extension is currently on. You can turn it off in Safari
            Extensions preferences.</p>
        <p class="platform-mac state-off">VideoTogether’s extension is currently off. You can turn it on in Safari
            Extensions preferences.</p>
        <button class="platform-mac open-preferences">Quit and Open Safari Extensions Preferences… / 打开插件设置</button>
    </div>
</body>

</html>
